<template>
    <div class="tags">
        <el-tag v-for="(tag, index) in tags" 
        :key="tag.name" 
        :closable="tag.name !== 'home'"
        :effect="route.name === tag.name ? 'dark' : 'plain'"
        @click="handleMenu(tag)"
        @close="handleClose(tag,index)"
        
        >
        {{ tag.label }}
        
        </el-tag>
        
    </div>
</template>
<script setup>
import { computed, ref } from 'vue'
import { useRoute ,useRouter} from 'vue-router'
import { useAllDataStore } from '@/stores';
const store = useAllDataStore()
// const tags = computed(() => store.state.tags)
const tags = ref([
    {
        path:'/home',
        name:'home',
        label:'首页',
        icon:'home'
    }
])
const route = useRoute()
const router = useRouter()
const handleMenu = (tag)=>{
    router.push(tag.name)
    store.selectMenu(tag)
}
const handleClose = (tag,index)=>{
    //通过pinia
    store.updateTags(tag)
    //如果点击的关闭tag不是对应的页面直接删掉
    if (tag.name !== route.name) return
    if (index === store.state.tags.length){
        store.selectMenu(tags.value[index-1])
        router.push(tags.value[index-1].name)
//不是最后一个，跳到最新界面
    }else{
        store.selectMenu(tags.value[index])
        router.push(tags.value[index].name)
    }

}

// // console.log();
</script>
<style lang="less" scoped>
.tags {
    margin: 20px 0 0 20px;
}
.el-tag{
    margin-right:10px ;
}
</style>